html,body {height: 100%;}

body {background: #eee;}

/*-------------------------------
general
--------------------------------*/
.button {display: inline-block; background: #ff0000a8; color: #ffffff; padding: 15px 20px; border-radius: 5px; text-decoration: none;}
.button {text-decoration: none;}

.buttonevent{
  background-color: #111827;
  border: 1px solid transparent;
  border-radius: .75rem;
  box-sizing: border-box;
  color: #FFFFFF;
  cursor: pointer;
  flex: 0 0 auto;
  font-family: "Inter var",ui-sans-serif,system-ui,-apple-system,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  font-size: 9px;
  font-weight: 10px;
  line-height: 8px;
  padding: .75rem 1.2rem;
  text-align: center;
  text-decoration: none #6B7280 solid;
  text-decoration-thickness: auto;
  transition-duration: .2s;
  transition-property: background-color,border-color,color,fill,stroke;
  transition-timing-function: cubic-bezier(.4, 0, 0.2, 1);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  width: auto;
 }
 
 .buttonevent:hover {
  background-color: #374151;
 }

 .buttonevent a {
  text-decoration: none;
  color:#eee;
 }
 
 .buttonevent:focus {
  box-shadow: none;
  outline: 2px solid white;
  outline-offset: 2px;
 }
 
 @media (min-width: 768px) {
  .buttonevent {
   padding: .75rem 1.5rem;
  }
 }


#docu:hover {padding: 5px 5px; background-color: #f5000056; color: #eee;}
#fb {color: #eee;}
#ig {color: #eee;}
#yt {color: #eee; }
#fb:hover {color: #363636;}
#ig:hover {color: #363636;}
#yt:hover {color: #363636;}
a {color:#f50000a8 }

.cssbuttons-io-button {
  background: #000000;
  color: white;
  font-family: inherit;
  padding: 0.35em;
  padding-left: 1.2em;
  font-size: 17px;
  font-weight: 500;
  border-radius: 0.9em;
  border: none;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  box-shadow: inset 0 0 1.6em -0.6em #32145e;
  overflow: hidden;
  position: relative;
  height: 2.8em;
  padding-right: 3.3em;
}

.cssbuttons-io-button a {
  text-decoration: none;
  color: #fff;
}

.cssbuttons-io-button .icon {
  background: white;
  margin-left: 1em;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.2em;
  width: 2.2em;
  border-radius: 0.7em;
  box-shadow: 0.1em 0.1em 0.6em 0.2em #32145e;
  right: 0.3em;
  transition: all 0.3s;
}

.cssbuttons-io-button:hover .icon {
  width: calc(100% - 0.6em);
}

.cssbuttons-io-button .icon svg {
  width: 1.1em;
  transition: transform 0.3s;
  color: #32145e;
}

.cssbuttons-io-button:hover .icon svg {
  transform: translateX(0.1em);
}

.cssbuttons-io-button:active .icon {
  transform: scale(0.95);
}


.fancy {
  background-color: transparent;
  border: 2px solid #000;
  border-radius: 0;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  float: right;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin: 0;
  outline: none;
  overflow: visible;
  padding: 1.25em 2em;
  position: relative;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  transition: all 0.3s ease-in-out;
  user-select: none;
  font-size: 13px;
 }
 
 .fancy::before {
  content: " ";
  width: 1.5625rem;
  height: 2px;
  background: black;
  top: 50%;
  left: 1.5em;
  position: absolute;
  transform: translateY(-50%);
  transform-origin: center;
  transition: background 0.3s linear, width 0.3s linear;
 }
 
 .fancy .text {
  font-size: 1.125em;
  line-height: 1.33333em;
  padding-left: 2em;
  display: block;
  text-align: left;
  transition: all 0.3s ease-in-out;
  text-transform: uppercase;
  text-decoration: none;
  color: black;
 }
 
 .fancy .top-key {
  height: 2px;
  width: 1.5625rem;
  top: -2px;
  left: 0.625rem;
  position: absolute;
  background: #e8e8e8;
  transition: width 0.5s ease-out, left 0.3s ease-out;
 }
 
 .fancy .bottom-key-1 {
  height: 2px;
  width: 1.5625rem;
  right: 1.875rem;
  bottom: -2px;
  position: absolute;
  background: #e8e8e8;
  transition: width 0.5s ease-out, right 0.3s ease-out;
 }
 
 .fancy .bottom-key-2 {
  height: 2px;
  width: 0.625rem;
  right: 0.625rem;
  bottom: -2px;
  position: absolute;
  background: #e8e8e8;
  transition: width 0.5s ease-out, right 0.3s ease-out;
 }
 
 .fancy:hover {
  color: white;
  background: black;
 }
 
 .fancy:hover::before {
  width: 0.9375rem;
  background: white;
 }
 
 .fancy:hover .text {
  color: white;
  padding-left: 1.5em;
 }
 
 .fancy:hover .top-key {
  left: -2px;
  width: 0px;
 }
 
 .fancy:hover .bottom-key-1,
  .fancy:hover .bottom-key-2 {
  right: 0;
  width: 0;
 }
/*--------------------------------------------
header
----------------------------------------------*/
.header {background: #111111}
.header__menu {float:right;margin:0; padding:0;}
.header__menu__item {display: inline-block;}
.header__menu__item a{color: #fff;display: block;padding:20px; text-decoration: none;font-family:sans-serif;font-size: 10px;}
.header__menu__item a:hover {background: #ff0000a8}
.header__menu__itemdiv {display: inline-block;}
.header__menu__itemdiv a{ color: #eee; background:#363636; display: block;padding:20px; text-decoration: none;font-family:sans-serif;font-size: 10px;}

.header__icon-bar {display: block;float: right;padding: 20px;display: none;}
.header__icon-bar span {display: block;height: 3px; width: 30px;background: #fff; margin-bottom:5px;}


/*---------------------------------
cover
----------------------------------*/
.cover{height: 70%;
    background-image :url(https://static.vascorossi.net/media/News/2022/Maggio/06/banner-1700x628.jpeg?v=20220506141434);
    background-size: cover;
    position: relative;
  }
  .cover__filter {
  background: #000;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 0;
  opacity:0.5;
  }
  .cover__caption{
      display: table;
      height: 100%;
      width: 100%;
      position: relative;
      z-index: 1;
      font-family: sans-serif;
      font-size: 13px;
    }
  .cover__caption__copy{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: #fff;}

  /*---------------------------------------------
cards
---------------------------------------------*/
.cards {max-width: 600px; margin:80px auto; }
.card {width: 30%; margin: 0 1.5%; background: #fff; float:left; border-radius: 30px;} 
.card__image{width: 100%; height: auto;}
.card__copy{padding: 5px 30px; font-family:sans-serif;}
.card__copy h3 {margin-bottom:0;font-family:sans-serif;font-size: 12px;}
.card__copy p {font-size: 10px;}

.cardssold {max-width: 600px; margin:40px auto;}
.cardsold {width: 30%; margin: 0 1.5%; background: #fff; float:left; border-radius: 30px; margin-bottom:30px;} 
.card__image__sold {width: 100%; height: auto;}
.card__copy__sold {padding: 5px 30px; font-family:sans-serif; color: #5e5c5c;}
.card__copy__sold h3 {margin-bottom:0;font-family:sans-serif; font-size: 12px;}
.card__copy__sold p {font-size: 10px;}

 /*----------------------------------------
  banner
  ----------------------------------------*/
  .banner{background: #fff; height: 35%; }

  .banner__copy {width: 50%; float: left; height: 100%; table;margin-left: 85px;}
  .banner__copy___text {font-family:sans-serif; display: table-cell; vertical-align: middle; padding: 30px; font-size: 20px;}
  .banner__copy___text h2 {font-family:sans-serif; font-size: 30px; margin-left: 250px;font-size: 15px;}
  .banner__copy___text p {margin-left: 250px; font-size: 12px;}

/*---------------------------------------------
footer
----------------------------------------------*/
.container {text-align: center; background: #111111; padding-top: 25px; width: 100%; position: absolute; top: 430%;}
.row {text-align: center; color: #fff; font-family: sans-serif; position: relative; font-size: 10px;margin-top: 30px;}
.follow {font-family: sans-serif; font-size: 8px;margin-bottom: 0px;}
.icons {text-align: center; color: #eee;}
.icons__item {display:inline-block; font-size: 30px; padding: 10px;margin-bottom: 20px;} 
ul {list-style-type:none;}

/*--------------------
smarphone-------------*/
@media (max-width: 767px) {
  .header {position:fixed; z-index: 100;width: 100%;}
  .header__icon-bar {display: block;}

  .header__menu {width: 100%;height: 0px; overflow: hidden;}
  .header__menu__item {display: block;}
  .is-open {height: 300px; overflow: auto;}
}

  .clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }



/*--------------------
smarphone-------------*/
@media (max-width: 767px) {
  .header {position:fixed; z-index: 100;width: 100%;}
  .header__icon-bar {display: block;}

  .header__menu {width: 100%;height: 0px; overflow: hidden;}
  .header__menu__item {display: block;}
  .is-open {height: 300px; overflow: auto;}
}

  .clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }